<!--
/* @license
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; - Fidelity Test Results</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/png" href="../shared-assets/icons/favicon.png"/>

  <script defer src="https://web3dsurvey.com/collector.js"></script>
  <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-169901325-1', { 'storage': 'none' });
    ga('set', 'referrer', document.referrer.split('?')[0]);
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
  </script>
  <script async src='https://www.google-analytics.com/analytics.js'></script>
<style>
  @import url('https://fonts.googleapis.com/css?family=Rubik:400,500');
  body {
    margin: 1em;
    background-color: #f7f7f7;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0,0,0,.87);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  p {
    max-width: 1000px;
    text-align: left;
  }
  .icon-modelviewer-black {
    background-image: url(../../assets/ic_modelviewer.svg);
  }
  .icon-button {
    margin-left: -4px;
    margin-right: 8px;
    width: 34px;
    height: 34px;
    background-size: 34px;
  }
  .inner-home {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    text-decoration: none;
  }
  .home {
    padding: 20px;
    overflow: auto;
    white-space: nowrap;
  }
  .lockup {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: rgba(0,0,0,.87);
  }
  .attribute {
    white-space: pre-wrap !important;
    font-family: 'Roboto Mono', monospace;
    color: black;
  }
  .attribute:hover {
    text-decoration: underline;
    color: #444444;
  }
</style>
</head>
<body>
  <div class="home lockup">
    <a href="../" class="sidebar-mv inner-home">
      <div class="icon-button icon-modelviewer-black inner-home"></div>
      <div class="inner-home"><span class="attribute">&lt;model-viewer&gt;</span></div>
    </a>
  </div>
  <div align="center">
    <h2>Render Fidelity Testing</h2>

    <p>The first set of scenarios are for demonstrating material capabilities,
    so these are primarily fidelity tests. Following these are simpler cases
    that test glTF spec conformance, but are not particularly interesting for
    fidelity. At the bottom are the Furnace Test and the Directional Light Test.
    The Furnace Test checks energy conservation and the correct result is the
    whole 7x7 grid of metal-rough spheres being invisible (indistinguishable
    from the background). The top (metal) and bottom (dielectric) rows are
    passing, while the mixtures lose some energy. The Directional Light Test
    checks the worst-case scenario for environmental lighting approximations:
    the case where a single bright pixel represents a directional light.</p>

    <p>We show a simple logarithmic metric on an average of the pixel
    differences, excluding the transparent background. This is <b>not</b> a
    perceptual metric, so take it with a grain of salt. It is mostly there to
    help us identify regressions.</p>

    <p><a href="https://policies.google.com/privacy">Privacy</a></p>
  </div>

  <image-comparison-app src="./results/config.json"></image-comparison-app>

  <script type="module" src="../dist/image-comparison-app.js"></script>

</body>
</html>
